<!-- 排行榜 -->
<script>
import { reactive, ref, toRefs } from "vue";
import { getLeaderBoard, getRankClient } from "../api/leader.js";
import navfooterView from "../components/navfooterView.vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";

export default {
  setup() {
    // 数据
    const state = reactive({
      state: [],
      LeaderBoard: [],
      leftTitle: [],
      rankClient: [],
      itemIndex: 0,
      bookclientId: 7,
      sex_index: 2,
      cartype: null, //分类
      page_index: 1,
      btnFlag: false, //回到顶部默认不显示
      scrollTop: 200,
      // bookclientId: "",
      // LeaderBoard: null,
    });

    const router = useRouter();
    // 顶部导航栏
    getLeaderBoard().then((data) => {
      data.data[0].leftmenu.forEach((item, index) => {
        if (index > -1) {
          state.leftTitle.push(item);
        }
      });
      console.log(data.data[0].leftmenu, "44");
      for (var i = 0; i < data.data.length; i++) {
        if (i < 3) {
          state.LeaderBoard.push(data.data[i]);
        }
      }
      console.log(state.LeaderBoard);
      state.cartype = state.LeaderBoard[state.itemIndex].child;
      console.log(state.cartype, "分类");
    });

    // 右边内容
    getRankClient({
      classId: state.sex_index,
      orderTime: 2,
      page: 1,
      type: state.bookclientId,
      channel: 0,
      _versions: 1310,
      appKey: 4037465544,
    }).then((data) => {
      data.data.forEach((item) => {
        state.rankClient.push(item);
      });
      console.log(state.rankClient, "排行");
    });

    // 切换效果
    let setItem = (id) => {
      state.itemIndex = state.leftTitle.findIndex((item) => item.id == id);
      getRankClient({
        classId: state.sex_index,
        orderTime: 2,
        page: 1,
        type: state.itemIndex,
        channel: 0,
        _versions: 1310,
        appKey: 4037465544,
      }).then((data) => {
        state.rankClient = data.data;

        console.log(data.data);
        console.log(state.rankClient);
      });
    };
    console.log("book", state.itemIndex);
    // 右边内容
    // classId=2&orderTime=2&page=1&type=7&channel=0&_versions=1310&appKey=4037465544

    // 切换效果

    //过滤器(计算)
    let getFilter = (value) => {
      if (value < 10000) {
        return value;
      }
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万";
      return y;
    };
    const active = ref(0);

    // 顶部导航栏切换
    let onClickTab = ({ title }) => {
      let index = state.LeaderBoard.findIndex((item) => item.name == title);
      state.sex_index = state.LeaderBoard[index].id;
      state.cartype = state.LeaderBoard[index].child;
      console.log(state.sex_index, "sex_index");
      state.itemIndex = 0;
      console.log(state.cartype, "分类");
      getRankClient({
        classId: state.sex_index,
        orderTime: 2,
        page: 1,
        type: 1,
        channel: 0,
        _versions: 1310,
        appKey: 4037465544,
      }).then((data) => {
        state.rankClient = data.data;
      });
      getLeaderBoard().then((data) => {
        state.leftTitle = [];
        console.log(data, "4asfaf");
        data.data[index].leftmenu.forEach((item, index) => {
          if (index > -1) {
            state.leftTitle.push(item);
          }
        });
      });
      Toast.success("切换成功");
    };

    // 跳转路由
    let btnFun = (id) => {
      router.push("/CartypesView?emid=" + id);
      Toast("分类");
    };

  
    // 回到顶部
    const backTop = () => {
      console.log(window, state.scrollTop, "top");

      let timer = setInterval(() => {
        let ispeed = Math.floor(-state.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          state.scrollTop + ispeed;
        if (state.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    };
    const scrollToTop = () => {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      state.scrollTop = scrollTop;
      if (state.scrollTop > 200) {
        state.btnFlag = true;
      } else {
        state.btnFlag = false;
      }
      // console.log(scrollTop, "top");
    };
    return {
      active, // tab切换
      ...toRefs(state),
      setItem,
      getFilter,
      onClickTab,
      btnFun, //跳转路由
      scrollToTop,
      backTop,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  components: {
    navfooterView,
  },
};
</script>
<template>
  <!-- 排行榜 -->
  <div class="leaderboard">
    <!-- 回到顶部 -->
    <div class="bac-top" v-if="btnFlag" @click="backTop"></div>
    <!-- 顶部导航栏 -->
    <div class="top_navbar">
      <div class="back_l">
        <router-link custom to="/home" v-slot="{ href, navigate }">
          <span
            :href="href"
            @click="navigate"
            class="iconfont icon-zuojiantou-copy"
          ></span>
        </router-link>
      </div>
      <p>排行榜</p>
      <router-link custom to="/searchView" v-slot="{ href, navigate }">
        <div class="search_r" :href="href" @click="navigate">
          <span class="iconfont icon-sousuo"></span>
        </div>
      </router-link>
    </div>
    <!-- 标题tab -->
    <van-tabs :active="active" sticky offset-top="45" @click-tab="onClickTab">
      <van-tab v-for="item in LeaderBoard" :title="item.name" :key="item.id">
        <!-- 标签tab  -->
        <div class="label_box">
          <!-- 下面内容 -->
          <div class="content">
            <!-- 左侧边栏 -->
            <div class="sidebar_box">
                <div
                  :class="itemIndex == index ? 'con' : ''"
                  class="sidebar_l"
                  v-for="(items, index) in leftTitle"
                  :key="items.id"
                  @click="setItem(items.id)"
                >
                  <div>{{ items.name }}</div>
                </div>
            </div>
            <!-- 右内容 -->
            <!-- 分类 -->
            <div class="main_r" v-if="itemIndex == 0">
              <div class="classify_box">
                <div
                  @click="btnFun(item.id)"
                  class="classify_item"
                  v-for="item in cartype"
                  :key="item.id"
                >
                  <div class="classify_top">
                    {{ item.name }}
                    <div class="img_big">
                      <img :src="item.rankIcon[1].cover" alt="" />
                    </div>
                    <div class="img_small">
                      <img :src="item.rankIcon[0].cover" alt="" />
                    </div>
                  </div>
                  <div class="classify_bottom">共{{ item.bookCount }}册</div>
                </div>
              </div>
            </div>
            <div class="main_r" v-if="!itemIndex == 0">
                  <div class="top">排行</div>
                  <div class="novel_box">
                    <div
                      class="novel_item"
                      v-for="(item, index) in rankClient"
                      :key="item.authLevelDate"
                    >
                      <router-link
                        custom
                        :to="'/details?id=' + item.bookId"
                        v-slot="{ href, navigate }"
                      >
                        <div class="item_c" :href="href" @click="navigate">
                          <div class="item_l">
                            <!-- <img src="../assets/img/rank_book_top_n.png" alt="" /> -->
                            <span class="a1" v-if="index == 0">{{
                              index + 1
                            }}</span>
                            <span class="a2" v-if="index == 1">{{
                              index + 1
                            }}</span>
                            <span class="a3" v-if="index == 2">{{
                              index + 1
                            }}</span>
                            <span v-if="index >= 3">{{ index + 1 }}</span>
                          </div>
                          <img :src="item.coverImg" alt="" />
                        </div>

                        <div class="item_r" :href="href" @click="navigate">
                          <h4>{{ item.bookName }}</h4>
                          <p class="text_p">{{ item.introduction }}</p>
                          <div class="text">
                            <p>
                              {{ item.categoryName }} •
                              {{ getFilter(item.wordCount) }}字
                            </p>
                            <p
                              class="text_num"
                              v-if="
                                item.remark &&
                                item.remark != 1 &&
                                item.remark != -1
                              "
                            >
                              {{ item.remark }}
                            </p>
                          </div>
                        </div>
                      </router-link>
                    </div>
                  </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <navfooterView></navfooterView>
</template>



<style lang="scss" scoped>
:deep {
  // 标题tab
  .van-tabs__line {
    background: none;
  }
  .van-tabs__wrap {
    border-bottom: 1px #f8f8f8 solid;
  }
  .van-tab {
    line-height: 1;
    flex: none;
    padding: 0 15px;
    font-family: "宋体";
    transition: all 0.3s linear;
  }
  .van-tab__text--ellipsis {
    font-weight: bold;
  }
  .van-tab--active {
    color: #000;
    font-size: 21px;
    font-weight: bold;
    padding: 0 25px;
  }
  .van-sticky {
    position: fixed;
    top: 45px;
    // left: 0;
    width: 100%;
    z-index: 10;
  }
}

.leaderboard {
  // background-color: #f8f8f8;
  height: 100vh;
  padding: 85px 0 50px;
  .bac-top {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 37px;
    height: 37px;
    background: url("../assets/img/10068.png") no-repeat center;
    background-size: 37px 37px;
    z-index: 999;
  }
  .top_navbar {
    position: fixed;
    width: 100%;
    min-width: 375px;
    max-width: 750px;
    box-sizing: border-box;
    top: 0;
    z-index: 10;
    background-color: #fff;
    padding: 0 16px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .back_l {
      font-size: 22px;
      font-weight: 600;
    }
    p {
      font-weight: bold;
    }
    .search_r {
      font-size: 22px;
      font-weight: 600;
    }
  }
  .content {
    display: flex;
        // justify-content: flex-end;
    .sidebar_box {
      width: 23%;
      // div {
        position: fixed;
        top: 89px;
        // left: 0;
        background-color: #fff;

        bottom: 0;
        z-index: 10;
      // }
      .sidebar_l {
        // flex: 1;
        background: #ffffff;
        padding: 15px 0;
        font-size: 15px;
        text-align: center;
      }
      .con {
        font-weight: bold;
        font-size: 15px;
        background-color: #f8f8f8;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: 4px;
          height: 32px;
          background-color: #13b67f;
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 0px 8px 8px 0px;
        }
      }
    }

    .main_r {
      background-color: #f8f8f8;
      z-index: 7;
      padding: 0 0 50px 0;
      width: 77%;
      box-sizing: border-box;
      position: relative;
      margin-left: 23%;
      // 分类
      .classify_box {
        // padding-top: 60px;
        padding: 0 10px;
        flex-wrap: wrap;
        display: flex;
        z-index: 8;
        justify-content: space-between;
        .classify_item {
          margin-top: 30px;
          border: 1px solid #fbfbfb;
          // margin-right: 10px;

          .classify_top {
            // padding-
            padding: 10px 0;
            padding-left: 12px;
            padding-right: 62px;
            background-image: linear-gradient(#d6d7db, #f3f3fa);
            border-radius: 4px 4px 0 0;
            position: relative;
            font-size: 12px;
            // overflow: hidden;
            .img_big {
              width: 36px;
              position: absolute;
              right: 18px;
              bottom: 0;
              border: #fff solid;
              border-width: 1px 0 0 1px;
              z-index: 5;
              border-radius: 3px 3px 0px 0px;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .img_small {
              width: 36px;
              position: absolute;
              right: 7px;
              bottom: 0;
              border: #fff solid;
              border-width: 1px 1px 0 0;
              height: 40px;
              border-radius: 3px 3px 0px 0px;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .classify_bottom {
            z-index: 5;
            background-color: #ffffff;
            color: #595c5b;
            font-size: 12px;
            padding: 5px 0 7px 5px;
          }
        }
      }
      // 排行榜
      .top {
        padding: 14px 10px;
        font-size: 12px;
        color: #adadad;
        z-index: 8;
      }
      .novel_box {
        z-index: 8;
        .novel_item {
          padding: 0 10px 10px 0;
          display: flex;
          align-items: center;

          .item_l {
            margin-right: 10px;
            .a1 {
              background: url("../assets/img/rank_book_top_1.png");
              background-size: 100%;
              color: #fff;
            }
            .a2 {
              background: url("../assets/img/rank_book_top_2.png");
              color: #fff;
              background-size: 100%;
            }
            .a3 {
              color: #fff;
              background: url("../assets/img/rank_book_top_3.png");
              background-size: 100%;
            }
            span {
              background: url("../assets/img/rank_book_top_n.png");
              background-size: 100%;
              width: 16px;
              height: 21px;
              display: flex;
              justify-content: center;
              align-items: flex-end;
              font-size: 12px;
              color: #939393;
              padding-bottom: 1px;
            }
          }
          .item_c {
            width: 27%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            height: 55px;
            img {
              height: 100%;
              border-radius: 4px;
            }
            overflow: hidden;
            // margin: 0 10px;
            margin-left: 10px;
          }
          .item_r {
            width: 168px;
            h4 {
              font-size: 13px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
            .text_p {
              font-size: 12px;
              color: #939393;
              -webkit-line-clamp: 2;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .text {
              display: flex;
              justify-content: space-between;
              p {
                font-size: 12px;
                transform: scale(0.8);
                color: #b4b4b4;
              }
              .text_num {
                color: #9c7759;
              }
            }
          }
        }
      }
    }
  }
}
</style>